<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>修洗箱管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-tabs
        :activeKey="isComplete"
        type="card"
        :tab-bar-style="{margin:0}"
        size="large"
        @change="tabChange"
      >
        <a-tab-pane :key="0" tab="待修洗" style=" background:#fff; padding:24px;">
          <a-form-model layout="inline" :model="form" style="padding:2px 0px 24px 0px;">
            <a-form-model-item label="箱号">
              <a-input v-model="form.containerNoLike" style="width:180px" />
            </a-form-model-item>
            <a-form-model-item label="持箱人">
              <a-select v-model="form.holderId" style="width:200px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in holderList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱况" prop="containerStatus">
              <a-select v-model="form.containerStatus" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option value="A">A</a-select-option>
                <a-select-option value="COMMON">普通</a-select-option>
                <a-select-option value="BROKEN">坏箱</a-select-option>
                <a-select-option value="DIRTY">污箱</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="报修日期" prop="time">
              <a-range-picker @change="onChange" style="width:235px">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-model-item>
            <a-form-model-item label="修洗情况" prop="repairOrWash">
              <a-select v-model="form.repairOrWash" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">修箱</a-select-option>
                <a-select-option :value="2">洗箱</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="所在港口" prop="portId">
              <a-select v-model="form.portId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in portList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="报修洗人" prop="repairerLike">
              <a-input v-model="form.repairerLike" style="width:180px" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="check">查询</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="excelExport">导出Excel</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="batchAction">批量完成</a-button>
            </a-form-model-item>
          </a-form-model>
          <a-table
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="columns"
            :data-source="data"
            :pagination="pagination"
            :loading="loading"
            :row-key="(record,index) => index"
          >
            <template slot="status" slot-scope="text, record">
              <span v-if="record.statusBefore === 'A'">A</span>
              <span v-else-if="record.statusBefore === 'COMMON'">普通</span>
              <span v-else-if="record.statusBefore === 'BROKEN'">坏箱</span>
              <span v-else-if="record.statusBefore === 'DIRTY'">污箱</span>
            </template>
            <span slot="action" slot-scope="record">
              <a @click="completeWash(record)" style="margin-right:10px">完成</a>
              <a @click="removeWash(record)">移除</a>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="1" tab="已完成" style=" margin-top:-1px; background:#fff; padding:24px;">
          <a-form-model layout="inline" :model="form1" style="padding:2px 0px 24px 0px;">
            <a-form-model-item label="箱号">
              <a-input v-model="form1.containerNoLike" style="width:160px" />
            </a-form-model-item>
            <a-form-model-item label="持箱人">
              <a-select v-model="form1.holderId" style="width:190px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in holderList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱况">
              <a-select v-model="form1.containerStatus" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option value="A">A</a-select-option>
                <a-select-option value="COMMON">普通</a-select-option>
                <a-select-option value="BROKEN">坏箱</a-select-option>
                <a-select-option value="DIRTY">污箱</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item class="contain_tim">
              <a-select v-model="form1.dateSearchType" style="width:100px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">报修日期</a-select-option>
                <a-select-option :value="2">完成日期</a-select-option>
              </a-select>
              <a-range-picker @change="onChange1" style="width:250px">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-model-item>
            <a-form-model-item label="修洗情况">
              <a-select v-model="form1.repairOrWash" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">修箱</a-select-option>
                <a-select-option :value="2">洗箱</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="所在港口">
              <a-select v-model="form1.portId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in portList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="报修洗人">
              <a-input v-model="form1.repairerLike" style="width:180px" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="check2">查询</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="excelExport">导出Excel</a-button>
            </a-form-model-item>
          </a-form-model>
          <a-table
            :columns="columns1"
            :data-source="data1"
            :pagination="pagination"
            :loading="loading"
            :row-key="(record,index) => index"
          >
            <template slot="status" slot-scope="text, record">
              <span v-if="record.statusEnd === 'A'">A</span>
              <span v-else-if="record.statusEnd === 'COMMON'">普通</span>
              <span v-else-if="record.statusEnd === 'BROKEN'">坏箱</span>
              <span v-else-if="record.statusEnd === 'DIRTY'">污箱</span>
            </template>
            <span slot="action" slot-scope="record">
              <a @click="completeWash(record)" style="margin-right:10px">完成</a>
              <a @click="removeWash(record)">移除</a>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal
      v-model="editVisible"
      title="编辑"
      :body-style="{padding:'40px 40px 20px 20px'}"
      :width="600"
      centered
      @cancel="cancelEdit"
      @ok="complete"
      destroyOnClose
    >
      <a-form-model
        ref="editForm"
        :rules="rules"
        :model="editForm"
        :label-col="{span:7}"
        :wrapper-col="{span:17}"
      >
        <!-- 修洗完成后箱态 -->
        <a-form-model-item label="修洗完成后箱态" prop="statusEnd">
          <a-select v-model="editForm.statusEnd">
            <a-select-option value>请选择</a-select-option>
            <a-select-option value="A">A</a-select-option>
            <a-select-option value="COMMON">普通</a-select-option>
            <a-select-option value="BROKEN">坏箱</a-select-option>
            <a-select-option value="DIRTY">污箱</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 完成日期 -->
        <a-form-model-item label="完成日期" prop="completeTime">
          <a-date-picker style="width:100%" v-model="editForm.completeTime" @change="editOnChange" />
        </a-form-model-item>
        <!-- 应付金额（箱/元） -->
        <a-form-model-item label="应付金额（箱/元）" prop="payableAmount">
          <!-- <a-input type="text" v-model="editForm.payableAmount" /> -->
          <a-input-number
            :min="0"
            :max="999999999999.99"
            :precision="2"
            v-model="editForm.payableAmount"
            style="width:100%"
          />
        </a-form-model-item>
        <!-- 应付结算对象 -->
        <a-form-model-item label="应付结算对象" prop="payableCustId">
          <a-select v-model="editForm.payableCustId">
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item,index) in payList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 应收金额（箱/元） -->
        <a-form-model-item label="应收金额（箱/元）">
          <!-- <a-input type="text" v-model="editForm.receivableAmount" /> -->
          <a-input-number
            :min="0"
            :max="999999999999.99"
            :precision="2"
            v-model="editForm.receivableAmount"
            style="width:100%"
          />
        </a-form-model-item>
        <!-- 应收结算对象 -->
        <a-form-model-item label="应收结算对象" prop="receivableCustId">
          <a-select v-model="editForm.receivableCustId">
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item,index) in receiveList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import {
  queryPortNameList,
  queryHolderNameList,
  queryContainerRepairWashList,
  queryCustNameList,
  completeContainerRepairWash,
  removeContainerRepairWash
} from '@/api/boxManagementCenter'
import moment from 'moment'
import { commonExport } from '@/api/request'
const fomrMessage = `必填项不能为空`
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '持箱人',
    dataIndex: 'holder'
  },
  {
    title: '所属港口',
    dataIndex: 'portName'
  },
  {
    title: '箱况',
    _needName: true,
    dataIndex: 'statusBefore',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '报修洗日期',
    dataIndex: 'createTime'
  },
  {
    title: '报修洗人',
    dataIndex: 'repairer'
  },
  {
    title: '操作',
    fixed: 'right',
    width: 120,
    scopedSlots: {
      customRender: 'action'
    }
  }
]
const columns1 = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '持箱人',
    dataIndex: 'holder'
  },
  {
    title: '所属港口',
    dataIndex: 'portName'
  },
  {
    title: '修洗情况',
    _needName: true,
    dataIndex: 'repairOrWash',
    customRender: (text, record, index) => {
      return record.repairOrWash === 1 ? '修箱' : '洗箱'
    }
  },
  {
    title: '修洗后箱况',
    _needName: true,
    dataIndex: 'statusEnd',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '完成日期',
    dataIndex: 'completeTime'
  },
  {
    title: '应付金额（元）',
    dataIndex: 'payableAmount',
    customRender: (text, record, index) => {
      return record.payableAmount || '--'
    }
  },
  {
    title: '应付结算对象',
    dataIndex: 'payableSettleUnit',
    customRender: (text, record, index) => {
      return record.payableSettleUnit || '--'
    }
  },
  {
    title: '应收金额（元）',
    dataIndex: 'receivableAmount',
    customRender: (text, record, index) => {
      return record.receivableAmount || '--'
    }
  },
  {
    title: '应收结算对象',
    dataIndex: 'receivableSettleUnit',
    customRender: (text, record, index) => {
      return record.receivableSettleUnit || '--'
    },
    width: 200,
    ellipsis: true
  }
]
export default {
  data () {
    return {
      dateFormat: 'YYYY-MM-DD',
      loading: true,
      portList: [],
      holderList: [],
      isComplete: 0,
      form: {
        isComplete: 0, // 是否完成 1是 0否
        containerNoLike: '', // 箱号
        holderId: '', // 持箱人id
        containerStatus: '', // 箱况 A(“A”),COMMON(“普通”),BROKEN(“坏箱”),DIRTY(“污箱”)
        dateSearchType: 1, // 时间查询类型 1、报修 2完成
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        repairOrWash: '', // 修洗情况：1修，2洗
        portId: '', // 港口id
        repairerLike: '' // 报修人
      },
      form1: {
        isComplete: 1, // 是否完成 1是 0否
        containerNoLike: '', // 箱号
        holderId: '', // 持箱人id
        containerStatus: '', // 箱况 A(“A”),COMMON(“普通”),BROKEN(“坏箱”),DIRTY(“污箱”)
        dateSearchType: '', // 时间查询类型 1、报修 2完成
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        repairOrWash: '', // 修洗情况：1修，2洗
        portId: '', // 港口id
        repairerLike: '' // 报修人
      },
      pageNum: 1,
      pageSize: 10,
      data: [],
      data1: [],
      columns,
      columns1,
      selectedRowKeys: [],
      pagination: {},
      editVisible: false,
      receiveList: [],
      payList: [],
      idList: [],
      selectedRows: [],
      editForm: {
        statusEnd: '', // 箱况 A(“A”),COMMON(“普通”),BROKEN(“坏箱”),DIRTY(“污箱”)
        completeTime: '', // 完成时间
        payableAmount: '', // 应付金额
        payableCustId: '', // 应付客户id
        receivableAmount: '', // 应收金额
        receivableCustId: '' // 应收客户id
      },
      rules: {
        statusEnd: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        completeTime: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        payableAmount: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        payableCustId: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ]
      },
      btnControl: {}
    }
  },
  methods: {
    momentDate (date, format) {
      return moment(date)
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => {})
    },
    custNameList (e, type) {
      queryCustNameList(e)
        .then(res => {
          // // console.log(res)
          if (type === 'pay') {
            this.payList = res.data
          } else if (type === 'receive') {
            this.receiveList = res.data
          }
        })
        .catch(rs => {})
    },
    washListRequest (e, type) {
      this.loading = true
      queryContainerRepairWashList(e)
        .then(res => {
          if (type === 0) {
            this.data = res.data.list
          } else {
            this.data1 = res.data.list
          }

          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let form = this.isComplete ? this.form1 : this.form
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...form
              }
              this.washListRequest(paramData, type)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let form = this.isComplete ? this.form1 : this.form
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...form
              }
              this.washListRequest(paramData, type)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    completeWashRequest (e) {
      completeContainerRepairWash(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功！')
            this.$refs.editForm.resetFields()
            this.selectedRows = []
            this.selectedRowKeys = []
            setTimeout(() => {
              this.editVisible = false
              let form = this.isComplete ? this.form1 : this.form
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...form
              }
              this.washListRequest(paramData, this.isComplete)
            }, 800)
          }
        })
        .catch(rs => {})
    },
    removeWashRequest (e) {
      removeContainerRepairWash(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功！')
            let form = this.isComplete ? this.form1 : this.form
            let paramData = {
              pageSize: this.pageSize,
              pageNum: this.pageNum,
              ...form
            }
            this.washListRequest(paramData, this.isComplete)
          }
        })
        .catch(rs => {})
    },
    tabChange (activeKey) {
      this.isComplete = activeKey
      this.pageNum = 1
      this.pageSize = 10
      if (activeKey === 0) {
        this.washListRequest({
          ...this.form,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }, 0)
      } else {
        this.washListRequest({
          ...this.form1,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }, 1)
      }
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onChange (date, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      this.washListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }, 0)
    },
    excelExport () {
      let param = {}
      if (this.isComplete === 0) {
        param = {
          ...this.form,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          columns: this.columns
        }
      } else {
        param = {
          ...this.form1,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          columns: this.columns1
        }
      }
      commonExport('/container/exportContainerRepairWashList', param)
    },
    batchAction () {
      // // console.log(this.selectedRows)
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      let targetList = this.selectedRows
      if (targetList.length === 0) {
        this.$message.error('请先选择集装箱！')
        return false
      }
      let temList = []
      for (let i = 0; i < targetList.length; i++) {
        temList.push(targetList[i].id)
      }
      this.idList = temList
      this.editVisible = true
    },
    completeWash (e) {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      // console.log(e)
      this.editVisible = true
      this.idList = [e.id]
    },
    removeWash (e) {
      if (!this.btnControl.drop) {
        this.$message.error('您无此权限！')
        return false
      }
      let _s = this
      _s.$confirm({
        content:
          '移除则表明该集装箱不需要修洗，从此待修洗列表中删除，确认移除？',
        onOk () {
          _s.removeWashRequest({
            id: e.id
          })
        },
        onCancel () {}
      })
    },
    editOnChange (date, dateString) {
      this.editForm.completeTime = dateString
    },
    complete () {
      let _s = this
      _s.$refs.editForm.validate(valid => {
        if (valid) {
          _s.completeWashRequest({
            ..._s.editForm,
            idList: _s.idList
          })
        }
      })
    },
    cancelEdit () {
      this.$refs.editForm.resetFields()
      this.idList = []
    },
    onChange1 (date, dateString) {
      this.form1.startDate = dateString[0]
      this.form1.endDate = dateString[1]
    },
    check2 () {
      this.pageNum = 1
      this.washListRequest(
        {
          ...this.form1,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        },
        1
      )
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.portListRequest({
      status: 1,
      isContainerManagement: 1
    })
    this.holderListRequest({})
    this.washListRequest(
      {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      },
      0
    )
    this.custNameList(
      {
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        status: 1,
        isReceivable: 1
      },
      'receive'
    )
    this.custNameList(
      {
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        status: 1,
        isPayable: 1
      },
      'pay'
    )
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  margin: 24px;
  min-height: 700px;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  border: none;
}
</style>
<style>
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  border: none;
  margin-right: 4px;
}
</style>
